<!DOCTYPE html>
<!--
  ~ jquery.mb.components
  ~ Copyright (c) 2001-2010. Matteo Bicocchi (Pupunzi); Open lab srl, Firenze - Italy
  ~ email: info@pupunzi.com
  ~ site: http://pupunzi.com
  ~
  ~ Licences: MIT, GPL
  ~ http://www.opensource.org/licenses/mit-license.php
  ~ http://www.gnu.org/licenses/gpl.html
  -->

<html>
<head>
<title>mbMenu</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="inc/jquery.metadata.js"></script>
<script type="text/javascript" src="inc/jquery.hoverIntent.js"></script>
<script type="text/javascript" src="inc/mbMenu.js"></script>

<!--<link rel="stylesheet" type="text/css" href="css/menu_black.css" media="screen" />-->
<link rel="stylesheet" type="text/css" href="css/menu_black.css" media="screen" />

<style type="text/css">
  body  a.style{
    color:#AF3002;
    font-family:sans-serif;
    font-size:13px;
    text-decoration:none;
  }
</style>

<script type="text/javascript">
  $(function(){
    if (self.location.href == top.location.href){
      $("body").css({font:"normal 13px/16px 'trebuchet MS', verdana, sans-serif"});
      var logo=$("<a href='http://pupunzi.com'><img id='logo' border='0' src='http://pupunzi.com/images/logo.png' alt='mb.ideas.repository' style='display:none;'></a>");
      $("body").prepend(logo);
      $("#logo").fadeIn();
    }
  });
</script>

<style type="text/css">

  body  a.style{
    color:#AF3002;
    font-family:sans-serif;
    font-size:13px;
    text-decoration:none;
  }

  .wrapper{
    font-family:Arial, Helvetica, sans-serif;
    margin-top:50px;
    margin-left:50px;
  }

  .wrapper h1{
    font-family:Arial, Helvetica, sans-serif;
    font-size:26px;
  }
  button{
    padding:4px;
    display:inline-block;
    cursor:pointer;
    font:12px/14px Arial, Helvetica, sans-serif;
    color:#666;
    border:1px solid #999;
    background-color:#eee;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    -moz-box-shadow:#999 2px 0px 3px;
    -webkit-box-shadow:#999 2px 0px 3px;
    margin-bottom:4px;
  }
  button:hover{
    color:#aaa;
    background-color:#000;
  }
  :focus {
    outline: 0;
  }

  span.btn{
    padding:10px;
    display:inline-block;
    cursor:pointer;
    font:12px/14px Arial, Helvetica, sans-serif;
    color:#aaa;
    background-color:#eee;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    -moz-box-shadow:#999 2px 0px 3px;
    -webkit-box-shadow:#999 2px 0px 3px;
  }
  span.btn:hover{
    background-color:#000;
  }
  
  .msgBox{
    position:absolute;
    width:250px;
    height:60px;
    background:black;
    -moz-box-shadow:#999 2px 0px 3px;
    -webkit-box-shadow:#999 2px 0px 3px;    
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    padding:10px;
    padding-top:30px;
    top:10px;
    right:10px;
    font:20px/24px Arial, Helvetica, sans-serif;
  }

</style>

<script type="text/javascript">

  /*
   * DEFAULT OPTIONS
   *
   options: {
   template:"yourMenuVoiceTemplate",--> the url that returns the menu voices via ajax. the data passed in the request is the "menu" attribute value as "menuId"
   additionalData:"",								--> if you need additional data to pass to the ajax call
   menuSelector:".menuContainer",		--> the css class for the menu container
   menuWidth:150,										--> min menu width
   openOnRight:false,								--> if the menu has to open on the right insted of bottom
   iconPath:"ico/",									--> the path for the icons on the left of the menu voice
   hasImages:true,									--> if the menuvoices have an icon (a space on the left is added for the icon)
   fadeInTime:100,									--> time in milliseconds to fade in the menu once you roll over the root voice
   fadeOutTime:200,									--> time in milliseconds to fade out the menu once you close the menu
   menuTop:0,												--> top space from the menu voice caller
   menuLeft:0,											--> left space from the menu voice caller
   submenuTop:0,										--> top space from the submenu voice caller
   submenuLeft:4,										--> left space from the submenu voice caller
   opacity:1,												--> opacity of the menu
   shadow:false,										--> if the menu has a shadow
   shadowColor:"black",							--> the color of the shadow
   shadowOpacity:.2,								--> the opacity of the shadow
   openOnClick:true,								--> if the menu has to be opened by a click event (otherwise is opened by a hover event)
   closeOnMouseOut:false,						--> if the menu has to be cloesed on mouse out
   closeAfter:500,									--> time in millisecond to whait befor closing menu once you mouse out
   minZindex:"auto", 								--> if set to "auto" the zIndex is automatically evaluate, otherwise it start from your settings ("auto" or int)
   hoverInted:0, 										--> if you use jquery.hoverinted.js set this to time in milliseconds to delay the hover event (0= false)
   onContextualMenu:function(o,e){} --> a function invoked once you call a contextual menu; it pass o (the menu you clicked on) and e (the event)
   },
   */

  $(function(){
    $(".myMenu").buildMenu(
    {
      template:"menuVoices.html",
      additionalData:"pippo=1",
      menuWidth:200,
      openOnRight:false,
      menuSelector: ".menuContainer",
      iconPath:"ico/",
      hasImages:true,
      fadeInTime:100,
      fadeOutTime:300,
      adjustLeft:2,
      minZindex:"auto",
      adjustTop:10,
      opacity:.95,
      shadow:false,
      shadowColor:"#ccc",
      hoverIntent:0,
      openOnClick:true,
      closeOnMouseOut:false,
      closeAfter:1000,
      submenuHoverIntent:200
    });

    $(".vertMenu").buildMenu(
    {
      template:"menuVoices.html",
      menuWidth:170,
      openOnRight:true,
      menuSelector: ".menuContainer",
      iconPath:"ico/",
      hasImages:true,
      fadeInTime:200,
      fadeOutTime:200,
      adjustLeft:0,
      adjustTop:0,
      opacity:.95,
      openOnClick:false,
      minZindex:200,
      shadow:false,
      hoverIntent:300,
      submenuHoverIntent:300,
      closeOnMouseOut:true
    });

    $(document).buildContextualMenu(
    {
      template:"menuVoices.html",
      menuWidth:200,
      overflow:2,
      menuSelector: ".menuContainer",
      iconPath:"ico/",
      hasImages:false,
      fadeInTime:100,
      fadeOutTime:100,
      adjustLeft:0,
      adjustTop:0,
      opacity:.99,
      closeOnMouseOut:false,
      onContextualMenu:function(o,e){}, //params: o = the contextual menu,e = the event
      shadow:false
    });
  });

  //this function get the id of the element that fires the context menu.
  function testForContextMenu(el){
    if (!el) el= $.mbMenu.lastContextMenuEl;
    alert("the ID of the element is:   "+$(el).attr("id"));
  }

  function recallcMenu(el){
    if (!el) el= $.mbMenu.lastContextMenuEl;
    var cmenu=+$(el).attr("cmenu");
    $(cmenu).remove();
  }

  function loadFlash(){
    $.ajax({
      url:"testFlash/test.html",
      success:function(html){
        $("#flashTest").html(html);
      }
    });
  }

  function showMessage(msg){
    var msgBox=$("<div>").addClass("msgBox");
    $("body").append(msgBox);
    msgBox.append("You click on: <br>"+msg);
    setTimeout(function(){msgBox.fadeOut(500,function(){msgBox.remove();})},3000)
  }

</script>

</head>
<body bgcolor="#ffffff">
<div class="wrapper">
  <h1>mb.menu.demo</h1>
change css:

  <button onclick="$('[rel=stylesheet]').attr('href','css/menu_red.css')">red</button>
  <button onclick="$('[rel=stylesheet]').attr('href','css/menu_black.css')">black</button>
  <table width="100%"  border="0" cellpadding="0" cellspacing="0" bgcolor="#EDEDED">
    <tr>
      <td width="180" height="33" style="padding:10px" class="style">
      </td>
      <td valign="bottom">
        <table  border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" class="container">
          <tr>
            <td class="myMenu">

              <!-- start horizontal menu -->

              <table class="rootVoices" cellspacing='0' cellpadding='0' border='0'><tr>
                <td class="rootVoice {menu: 'box_menu'}" >box menu</td>
                <td class="rootVoice {menu: 'menu_12'}" >ajax menu</td>
                <td class="rootVoice {menu: 'menu_2'}" >menu 1</td>
                <td class="rootVoice {menu: 'menu_2', disabled:true}" >menu disabled</td>
                <td class="rootVoice {menu: 'menu_3'}" >menu 2</td>
                <td class="rootVoice {menu: 'empty'}" onclick="showMessage('empty root menu')">empty menu</td>
              </tr></table>

              <!-- end horizontal menu -->

            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
  <div id="flashTest"><span onclick="loadFlash();" style="cursor:pointer"><br> click here to load a flash movie and test the menu over it!</span></div>

  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <!-- start conextual menu  -->
  <a class="cmVoice {cMenu:'menu_12'}" id="pippo"> Contextual menu 1</a>&nbsp;&nbsp;&nbsp;<a class="cmVoice {cMenu:'conext_menu_1'}" id="pluto"> Contextual menu 2</a>
  <!-- end conextual menu  -->
  <br/>
  <br/>
  <br/>
  <br/>
  <div class="containerContent" style="float:right; margin-left:150px; margin-right:100px">
    <input type="text" name="tuoTesto" value="explorer test" /><br/><br/>
    <a class="style" href="#">Lorem ipsum dolor</a> sit amet, consectetuer adipiscing elit. Morbi felis leo, consequat et, lacinia a, facilisis sit amet, nulla. In ornare tincidunt ante. Donec non sem. Morbi augue mi, accumsan non, nonummy ac, tempor eleifend, lacus. Nunc quam. Suspendisse tincidunt, purus sit amet adipiscing placerat, leo nunc interdum nulla, sed suscipit lacus felis ac enim. Maecenas nibh. Cras at tortor. Maecenas leo. Nullam eget tellus. Curabitur imperdiet dignissim sem. Nullam viverra viverra leo.
    Mauris ac ipsum. Aenean eget magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam mollis ante id ipsum. Sed elementum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Duis lobortis rutrum felis. Vestibulum varius. In tincidunt turpis sed justo. Suspendisse potenti. Ut sodales risus non dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Proin lectus. Pellentesque vel arcu. Etiam sem lacus, molestie at, euismod non, lobortis vitae, mi.
  </div>

  <!-- start vertical menu -->
  <div class="vertMenu">
    <table class="rootVoices vertical" cellspacing='0' cellpadding='0' border='0'>
      <tr><td class="rootVoice {menu: 'box_menu'}" >box menu</td></tr>
      <tr><td class="rootVoice {menu: 'menu_12'}" >ajax menu</td></tr>
      <tr><td class="rootVoice {menu: 'menu_1'}" >menu 1</td></tr>
      <tr><td class="rootVoice {menu: 'menu_3'}" >menu 3</td></tr>
    </table>
  </div>
  <!-- end vertical menu -->

  <!-- menues -->
  <div id="menu_1" class="mbmenu">
    <a rel="title" >title menu_1.1</a> <!-- menuvoice title-->
    <a href="http://patapage.com" class="{img: 'ico_view.gif'}" >menu_1.1 (href with target "_self") </a> <!-- menuvoice with href-->
    <a class="{action: 'showMessage(\'menu_1.2\')'}" >menu_1.2</a> <!-- menuvoice with js action-->
    <a rel="separator"> </a> <!-- menuvoice separator-->
    <a href="#" class="{action: 'showMessage(\'menu_1.3\')', disabled:true}">menu_1.3</a> <!-- menuvoice disabled-->
    <a class="{action: 'showMessage(\'menu_1.4\')', menu:'menu_1', img: '24-book-blue-check.png'}">menu_1.4</a><!-- menuvoice with js action, image and submenu-->
  </div>

  <div id="menu_2" class="mbmenu">
    <a rel="title" class="{action: 'showMessage(\'menu_2.1\')', img: 'icon_13.png'}">choose one of these links</a>
    <a class="{action: 'showMessage(\'menu_2.2\')'}">menu_2.2</a>
    <a class="{menu: 'sub_menu_1', img: 'icon_14.png', disabled:true}">menu_2.3 (disabled)</a>
    <a class="{menu: 'sub_menu_2', img: '24-tag-add.png'}">menu_2.4</a>
    <a rel="separator"> </a>
    <a class="{action: 'showMessage(\'menu_2.4\')'}">menu_2.5</a>
  </div>

  <div id="menu_3" class="mbmenu" id="checkMenu">
    <a rel="text">
      <form>
        <img src="images/browser.png" alt="img" style="position:absolute;margin-top:-20px; margin-left:-25px;margin-bottom:10px"/><br/>
        <input id="myInput" type="text" name="tuoTesto" value="you can have input inside" />
        <input type="button" name="tuoTesto" value="submit" onclick="$.fn.removeMbMenu($.mbMenu.options.actualOpenedMenu,true);" />
        <table>
          <tr><td><input type="checkbox" checked value="aaa"/></td><td>checkbox 1</td></tr>
          <tr><td><input type="checkbox" value="aaa"/></td><td>checkbox 1</td></tr>
          <tr><td><input type="checkbox" value="aaa"/></td><td>checkbox 1</td></tr>
          <tr><td><input type="checkbox" value="aaa"/></td><td>checkbox 1</td></tr>
        </table>
        <br>
        <br/>* form fields value are not preserved once you close the menu!
      </form>
    </a>
    <a rel="separator"> </a>
    <a class="{action: 'showMessage(\'menu_3.1\')', img: 'iconDone.png'}">menu_3.1</a>
    <a id="aaa" class="{menu:'sub_menu_2'}"  >submenu</a>
    <a class="{action: 'showMessage(\'menu_3.4\')'}">menu_3.4 con testo veramente molto lungo menu_3.4 con testo veramente molto lungo</a>
  </div>

  <div id="sub_menu_1" class="mbmenu">
    <a class="{action: 'showMessage(\'sub_menu_1.1\')'}">sub_menu_1.1</a>
    <a rel="separator"> </a>
    <a class="{menu:'menu_1'}">sub_menu_1.2</a>
    <a class="{action: 'showMessage(\'sub_menu_1.3\')', img: 'bgColor.gif'}">sub_menu_1.3</a>
    <a class="{action: 'showMessage(\'sub_menu_1.4\')',img: 'Applet.gif'}">sub_menu_1.4</a>
  </div>

  <div id="sub_menu_2" class="mbmenu">
    <a class="{action: 'showMessage(\'sub_menu_2.1\')', img: 'buttonfind.gif'}" target="_blank" >sub_menu_2.1</a>
    <a href="http://google.com" class="{img: 'buttonfind.gif'}" target="_self" >sub_menu_2.2 (href target _self)</a>
    <a class="{action: 'showMessage(\'sub_menu_2.3\')'}">sub_menu_2.3</a>
    <a rel="separator"> </a>
    <a class="{action: 'showMessage(\'sub_menu_2.4\')'}">sub_menu_2.4</a>
    <a class="{action: 'showMessage(\'sub_menu_2.5\')'}" >sub_menu_2.5</a>
  </div>

  <div id="conext_menu_1" class="mbmenu">
    <a rel="text" >
      <img src="images/browser.png" alt="img" style="position:absolute;margin-top:-20px; margin-left:-25px;margin-bottom:10px"/><br/>
      <br/>immagini che vuoi ed altro testo che ti pare Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi felis leo, consequat et, lacinia a, facilisis sit amet,<br/><br/>
    </a>
    <a rel="separator"> </a>
    <a class="{action: 'testForContextMenu()',img: 'iconDone.png'}" >test: get opener ID</a>
    <a id="bbb" class="{menu:'sub_menu_2'}" >submenu</a>
    <a class="{action: 'showMessage(\'conext_menu_1.4\')'}" >conext_menu_1.4 con testo veramente molto lungo</a>
  </div>

  <div id="box_menu" class="mbmenu boxMenu">
    <table style="border:0;" >
      <tr>
        <td>
          <div style="height:130px"><img src="http://patapage.net/pp/images/logo.png" alt="patapage" width="150"></div>
          <a href="http://patapage.com" target="_blank">Home</a>
          <a href="http://patapage.com/demo/" target="_blank">Demo page</a>
          <a href="http://patapage.com/applications/pataPage/site/aboutHelp.jsp" target="_blank">About Patapage</a>
          <a href="http://patapage.com/applications/pataPage/site/access/login.jsp" target="_blank">Sign up</a>
        </td>
        <td>
          <div style="height:130px;"><img src="http://bugsvoice.com/applications/bugsVoice/images/logo.png" alt="bugsvoice" width="250" style="padding-top:30px"></div>
          <a href="http://bugsvoice.com" target="_blank">Home</a>
          <a href="http://bugsvoice.com/applications/bugsVoice/site/details.jsp" target="_blank">Details</a>
          <a href="http://bugsvoice.com/applications/bugsVoice/site/aboutHelp.jsp" target="_blank">About Bugs Voice</a>
          <a href="http://bugsvoice.com/applications/bugsVoice/site/access/login.jsp" target="_blank">Sign up</a>
        </td>
        <td>
          <div style="height:130px"><img src="http://devineu.eu/applications/webwork/site_devineu/media/baloonSmall.png" alt="bugsvoice" width="200"></div>
          <a href="http://devineu.eu/home.page" target="_blank">Home</a>
          <a href="http://devineu.eu/mission.page" target="_blank">Mission</a>
          <a href="http://devineu.eu/interviewyourself.page" target="_blank">Interview yourself</a>
          <a href="http://devineu.eu/getInterviewed.page" target="_blank">Get interviewed</a>
        </td>
      </tr>
    </table>
  </div>

  <!-- end menus -->

</div>
</body>
</html>